<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.js"></script>
<script type="text/javascript">
$(function() {

	$("#btnAjax").click(function(){
		params = "saisie=" + $("#txtSaisie").val();
		$.ajax({
			type:"post",
			url:"ServletAjax",
			contentType:"application/x-www-form-urlencoded",
			async:false,
			data:params,
			success:function(data){
				$("#resultatAjax").html(data);
			},
			error:function(data){
				$("#resultatAjax").html(data.responseText);
			}
		});
	});

	$("#btnJson").click(function(){
		dbtUrl="http://localhost:8080/Ria_Rest/rest/chercher";
		finUrl = "/"+$("#txtSaisie").val();

		$.getJSON(dbtUrl + finUrl, function(data){

// 			alert(data.personneDTO.length);
			
			$("#resultatAjax").html("<ul>");
			for(i=0; i < data.personneDTO.length; i++ ) {
				$("#resultatAjax").append(  
					"<li>" + data.personneDTO[i].id + ", " +
					data.personneDTO[i].nom + "</li>"
				);
			}
			$("#resultatAjax").append("</ul>");
			
		}
		);
		
	});

	$("#btnFramework").click(function(){
		
		dbtUrl="http://localhost:8080/Ria_Rest/rest/testFramework";
		params = "saisie=" + $("#txtSaisie").val();
		$.ajax({
			type:"post",
			url:dbtUrl,
			contentType:"application/x-www-form-urlencoded",
			async:false,
			data:params,
			success:function(data){
				//$("#resultatAjax").html(data);
				alert("success ");
			},
			error:function(data){
				//$("#resultatAjax").html(data.responseText);
				alert("erreur");
			}
		});		
	});

	
});

</script>

</head>
<body>
	<span>Saisie : </span>
	<input type="text" id="txtSaisie" />
	<input type="button" id="btnAjax" value="Click" />
	<input type="button" id="btnJson" value="Call JSon" />
	<input type="button" id="btnFramework" value="Btn Framework !!!"/>
	<div id="resultatAjax"></div>

</body>
</html>